<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="短信统计" name="statistics">
          <text-statistics v-if="activeName === 'statistics'" />
        </el-tab-pane>
        <el-tab-pane label="短信群发" name="send">
          <group-send v-if="activeName === 'send'" />
        </el-tab-pane>
        <el-tab-pane label="模板管理" name="template">
          <template-manage v-if="activeName === 'template'" />
        </el-tab-pane>
        <el-tab-pane label="引导跳转页" name="guide">
          <guide-link v-if="activeName === 'guide'" />
        </el-tab-pane>
      </el-tabs>
      <el-button v-if="activeName === 'guide'" class="add-link" type="primary" @click="addGuideLink"
        >新建跳转页面</el-button
      >
    </el-card>
  </div>
</template>

<script>
import GroupSend from './send'
import GuideLink from './guide'
import TemplateManage from './template'
import TextStatistics from './statistics'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'ShortMessageService',
  components: {
    GroupSend,
    GuideLink,
    TextStatistics,
    TemplateManage
  },
  computed: {
    ...mapState('base', ['tab_key']),
    activeName: {
      get() {
        return this.tab_key ? this.tab_key : 'statistics'
      },
      set(val) {
        this.SET_TABS_TYPE({ value: val })
      }
    }
  },
  methods: {
    ...mapMutations('base', ['SET_TABS_TYPE']),
    handleClick({ name }) {
      this.SET_TABS_TYPE({ value: name })
    },
    addGuideLink() {
      this.$router.push({ name: 'AddGuide' })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  position: relative;
}
.add-link {
  position: absolute;
  top: 20px;
  right: 20px;
}
</style>
